<!DOCTYPE html>  
<html lang="zh">  
<head>  
    <style>  
        body {  
            background-image: url('2o.jpg'); /* 替换为你的图片路径 */  
            background-size: cover; /* 背景图覆盖整个区域 */  
            background-repeat: no-repeat; /* 不重复背景图 */  
            background-position: center; /* 背景图位置居中 */  
    margin: 0;  
    height: 100vh;  
    display: flex;  
    justify-content: center;  
    align-items: center;  
    background-color: #f0f0f0; /* 背景颜色 */  
}  

.container {  
    display: flex; /* 使用 Flexbox 布局 */  
}  

.flex-item {  
    width: 100px;  
    height: 100px;  
    margin: 10px;  
    display: flex;  
    justify-content: center;  
    align-items: center;  
    font-size: 16px;  
    color: white; /* 字体颜色 */  
}  

.transparent {  
    background-color: rgba(0, 0, 255, 0.5); /* 半透明的蓝色背景 */  
}  

.flex-item:not(.transparent) {  
    background-color: green; /* 不透明的背景颜色 */  
}
    </style>
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>房间示例</title>  
    <link rel="stylesheet" href="styles.css">  
</head>  
</html>
